<template>
	<view>
		<!-- <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in detail.list[0].pic.list">
				<view class="swiper-item">
					<image :src="imgBase+item.m" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper> -->
		<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item >
				<view class="swiper-item">
					<image :src="detail.img" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="text-center">
			<view class="margin-tb text-lg">
				{{detail.name}}
			</view>
			<view class="">
				{{detail.french}}
			</view>
		</view>
		<view class="flex justify-around">
			<view v-for="(item,index) in detail.list" @click="idx=index" :class="['text-center padding-sm tab',{active:idx==index}]" >
				<view class="">{{item.spec}}</view>
				<view class="">({{item.weight}})</view>
				<view class="">{{item.edible}}</view>
			</view>
		</view>
		<view class="padding fs-28 u-border-bottom">
			￥{{detail.list[idx].price}}
		</view>
		<view class="padding fs-28 u-border-bottom">
			<text>{{detail.list[idx].ahead}}</text>
			<text class="margin-lr">{{detail.list[idx].size}}</text>
			<text>{{detail.list[idx].fittings}}</text>
		</view>
		<view class="padding fs-28 u-border-bottom">
			
		</view>
		<view class="flex justify-around fixed padding-tb-sm">
			<button class="cu-btn bg-brown lg" type="default">加入购物车</button>
			<button class="cu-btn bg-yellow lg" type="default">立即购买</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail:null,
				idx:0  //选中的子商品序号
			}
		},
		computed: {
			imgBase() {
				return this.detail.img.split('/list')[0] 
			}
		},
		onLoad(){
			uni.getStorage({
				key:'detail',
				success: (res) => {
					console.log(res);
					this.detail =res.data
				}
			})
		},
		methods: {
			
		},
	}
</script>

<style lang="scss">
.banner{
	height: 600upx;
	swiper-item{
		height: 600upx;
	}
	image{
		width: 100%;
		// height: 600upx;
	}
}
.tab{
	&.active{
		// border-bottom: 4upx solid #fae456;
		background-color: #fae456;
	}
}
.cu-btn.lg{
	width: 46%;
}
</style>
